<template>
  <div id='tmpl'>
      <mt-swipe :auto="2000">
         <mt-swipe-item v-for="item in list">
          <img :src="item.img">
         </mt-swipe-item>     
      </mt-swipe>          
      
      <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		             <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                      <router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div>
                      </router-link>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                      <router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-share"></span>
		                    <div class="mui-media-body">图片分享</div>
                      </router-link>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                      <router-link to="/goods/goodslist">
		                    <span class="mui-icon mui-icon-buy"></span>
		                    <div class="mui-media-body">商品购买</div>
                      </router-link>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                      <router-link to="/feedback">
		                    <span class="mui-icon mui-icon-word"></span>
		                    <div class="mui-media-body">留言反馈</div>
                      </router-link>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                      <router-link to="/video">
		                    <span class="mui-icon mui-icon-video"></span>
		                    <div class="mui-media-body">视频专区</div>
                      </router-link>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                      <router-link to="/callme">
		                    <span class="mui-icon mui-icon-contact"></span>
		                    <div class="mui-media-body">联系我们</div>
                      </router-link>
                </li>
                 
		        </ul> 
		  </div>

  </div>
</template>
                   
<script>
  import {Toast} from 'mint-ui';  
  import common from  '../kits/common.js'               ;
  export default {
    name: "component_name",
    data () {
          return{
            list:[]      
        }
    },
    created(){
        this.getimgs();
    },
    methods:{
        getimgs(){
          var url =common.apidomain+ 'api/getlunbo';
          this.$http.get(url).then(function(response){
            var data = response.body;
            if(data.status != 0){
              Toast(data.message);
              return;
            }
            this.list = data.message;
          });
        }
    }
  }
</script>
                   
<style lang="css" scoped>
      .mint-swipe{
        height:150px;
      }
      .mint-swipe-item img{
        width:100%;
      }
     .mint-swipe-item{
       background-color:red;
       width:100%;
       height:150px;
     }     
     .mui-content ul{
       background-color: #fff;
     }       
     .mui-grid-view.mui-grid-9 .mui-table-view-cell{
       border-right:0;
       border-bottom:0;
     } 
     .mui-grid-view.mui-grid-9{
        border-top:0;
       border-left:0;
     }
     .mui-icon-home:before,
     .mui-icon-share:before,
     .mui-icon-buy:before,
     .mui-icon-word:before,
     .mui-icon-video:before,
     .mui-icon-contact:before{
       content:'';
       display:inline-block;
       width:50px;
       height:50px;
       background-repeat: round;
     }
     .mui-icon-home:before{
       background-image: url(../../statics/imgs/1.png);
     }
     .mui-icon-share:before{
       background-image: url(../../statics/imgs/2.png);
     }
     .mui-icon-buy:before{
       background-image: url(../../statics/imgs/3.png);
     }
     .mui-icon-word:before{
       background-image: url(../../statics/imgs/4.png);
     }
     .mui-icon-video:before{
       background-image: url(../../statics/imgs/5.png);
     }
     .mui-icon-contact:before{
       background-image: url(../../statics/imgs/6.png);
     }
</style>